<template>
	<view class="ticket" v-if="CouponList.length >= 1">
		<view class="item" v-for="(item,i) in CouponList" :key="i">
			<view class="top">
				<view class="top-left">
					<view class="price">
						<text class="unit">￥</text>
						<text class="number">{{item.coupon.used_amount}}</text>
					</view>
					<view class="condition">满{{item.coupon.with_amount}}元可用</view>
				</view>
				<view class="top-right">
					<view class="info">{{item.coupon.title}}</view>
					<view class="time" v-if="ispre">领取时间:{{item.create_time}}</view>
					<view class="time" v-else>有效期:{{item.coupon.end_time}}</view>

					<u-checkbox-group v-if="ispre">
						<u-checkbox v-model="checked" shape="circle" @change="checkboxChange(item)" class="checked">
						</u-checkbox>
					</u-checkbox-group>

				</view>
			</view>
			<view class="bottom">
				<u-collapse>
					<u-collapse-item title="使用规则">
						<view class="rule">
							<view>1.每张优惠卷只能使用一次，不能重复使用</view>
							<view>2.优惠卷必须在使用期限内使用，过期失效，有效期以卷面显示时间为准</view>
						</view>
					</u-collapse-item>
				</u-collapse>
			</view>
		</view>
	</view>
	<!-- 空白页组件 -->
	<Blankpage v-else></Blankpage>
</template>

<script>
	import { ResCouponList, ResUsable } from '@/untils/api.js'
	import { Blankpage } from '@/components/Blankpage/Blankpage.vue'
	import { toDate } from '@/untils/gettime.js'
	export default {
		components: {
			Blankpage
		},
		data() {
			return {
				checked: false,
				CouponList: [],
				ispre: false

			}
		},
		onLoad(option) {
			this.ispre = JSON.parse(option.ispre)
			// 1选择可用,2优惠列表
			if (this.ispre) {
				this.getUsable(option.data)
			} else {
				this.getCouponList()
			}
		},
		methods: {
			// 我的优惠
			async getCouponList() {
				const { data: res } = await ResCouponList()
				this.CouponList = res.data
				this.CouponList.forEach(item => {
					item.coupon.end_time = toDate(item.coupon.end_time, 1)
				})
				console.log(res, '优惠列表');
			},

			// 可用优惠
			async getUsable(data) {
				const { data: res } = await ResUsable(data)
				this.CouponList = res.data
				this.CouponList.forEach(item => {
					item.create_time = toDate(item.create_time, 1)
				})
				console.log(res, '可用优惠');
			},
			checkboxChange(item) {
				let discounts = {
					subamount: item.coupon.used_amount,
					coupon_id: item.coupon_id
				}
				console.log(discounts, '满----');
				uni.$emit('getsubamount', discounts)
				uni.navigateBack()
			}

		}
	}
</script>

<style lang="scss" scoped>
	.common {
		padding: 0 32rpx;
		box-sizing: border-box;
	}

	.ticket {
		font-family: PingFangSC-Regular, PingFang SC;
	}


	.item {
		width: 670rpx;
		// height: 264rpx;
		box-shadow: 0rpx 6rpx 22rpx 4rpx rgba(0, 0, 0, 0.06);
		margin: 0 auto;
		border-radius: 10rpx;
		overflow: hidden;
		margin-top: 20rpx;
	}

	.item .top {
		width: 100%;
		height: 188rpx;
		display: flex;
		border-bottom: 1rpx dashed #A5A5A5;
	}

	.item .top .top-left {
		width: 225rpx;
		height: 188rpx;
		border-right: 1rpx dashed #A5A5A5;
		border-left: 8rpx solid #01C3A8;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.item .top .top-left .price .unit {
		font-size: 42rpx;
		font-weight: 500;
		color: #FF5500;
		line-height: 59rpx;
	}

	.item .top .top-left .price .number {
		height: 73rpx;
		font-size: 52rpx;
		font-weight: 500;
		color: #FF5900;
		line-height: 73rpx;
	}

	.item .top .top-left .condition {
		height: 33rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #ED5C18;
		line-height: 33rpx;
		margin-top: 12rpx;
		text-align: center;
	}

	.item .top .top-right {
		flex: 1;
		height: 188rpx;
		padding: 35rpx 30rpx;
		box-sizing: border-box;
		position: relative;
	}

	.item .top .top-right .info {
		height: 45rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #242424;
		line-height: 45rpx;
	}

	.item .top .top-right .time {
		height: 33rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #5F5F5F;
		line-height: 33rpx;
		margin-top: 16rpx;
	}

	.item .top .top-right .checked {
		position: absolute;
		right: 0rpx;
		top: 85rpx;
	}

	.item .bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		box-sizing: border-box;

		/deep/.u-collapse-title {
			color: #949494;
		}

		/deep/.u-hover-class {
			opacity: 1;
		}

		.rule {
			padding-bottom: 10rpx;
		}
	}
</style>
